<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="lib/swiper/swiper-bundle.min.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body class="fixed-padding">
		<!-- header -->
		<div class="header">
			<div class="category">
				<img src="img/icon-10.png">
			</div>
			<div class="text">
				本家
			</div>
			<div class="search">
				<img src="img/icon-11.png">
			</div>
		</div>

		<!-- 轮播图swiper -->
		<div id="banner" class="swiper-container banner">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="img/banner-1.jpg">
				</div>
				<div class="swiper-slide">
					<img src="img/banner-1.jpg">
				</div>
				<div class="swiper-slide">
					<img src="img/banner-1.jpg">
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>

		<!-- 菜单 -->
		<div class="menu-section">
			<div class="item">
				<img src="img/icon-1.png">
				<div class="text">
					新品/热销
				</div>
			</div>
			<div class="item">
				<img src="img/icon-2.png">
				<div class="text">
					超值拼团
				</div>
			</div>
			<div class="item">
				<img src="img/icon-3.png">
				<div class="text">
					新人福利
				</div>
			</div>
			<div class="item">
				<img src="img/icon-4.png">
				<div class="text">
					时尚动态
				</div>
			</div>
		</div>

		<!-- banner -->
		<div class="banner-section">
			<div class="banner">
				<a href="http://www.baidu.com">
					<img src="img/banner-2.png">
				</a>
			</div>
		</div>

		<!-- 厂家直销 -->
		<div class="section cbrl-section">
			<div class="title">
				<span>厂家直销</span>
				<span class="line">|</span>
				<span>CBRL</span>
			</div>
			<div class="list">
				<div class="item">
					<a href="#">
						<div class="name">"痕印"双肩包INCOMPLE</div>
						<div class="price">2190元起</div>
						<img src="img/img-7.png">
					</a>
				</div>
				<div class="item">
					<a href="#">
						<div class="name">素雅电绣小白鞋CM286</div>
						<div class="price">369元起</div>
						<img src="img/img-10.png">
					</a>
				</div>
				<div class="item">
					<a href="#">
						<div class="name">灯心绒棒球帽DEFAULT</div>
						<div class="price">200元起</div>
						<img src="img/img-9.png">
					</a>
				</div>
				<div class="item">
					<a href="#">
						<div class="name">无数字手表DANIEL W-ELINGTON</div>
						<div class="price">369元起</div>
						<img src="img/img-8.png">
					</a>
				</div>
			</div>
		</div>

		<!-- 新品首发 -->
		<div class="section news-section">
			<div class="title">
				<span>新品首发</span>
				<span class="line">|</span>
				<span>NEWS</span>
			</div>
			<div class="list">
				<div class="item">
					<a href="#">
						<img src="img/photo-1.png">
						<div class="name">
							无声派对复古镜-A
						</div>
						<div class="hot-point">
							食品级304不锈钢 复合底
						</div>
						<div class="price">
							￥249
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/photo-2.png">
						<div class="name">
							镜面不锈钢双耳连盖汤煲
						</div>
						<div class="hot-point">
							食品级304不锈钢 复合底
						</div>
						<div class="price">
							￥359
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/photo-3.png">
						<div class="name">
							纳米水离子空气净化器
						</div>
						<div class="hot-point">
							美容、润肤 除甲醛、烟等有害气体
						</div>
						<div class="price">
							￥249
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/photo-4.png">
						<div class="name">
							S.PRINCESS荞麦保健枕
						</div>
						<div class="hot-point">
							全面面料 双面工艺 单面荞麦
						</div>
						<div class="price">
							￥89
						</div>
					</a>
				</div>
			</div>
		</div>

		<!-- 热卖 -->
		<div class="section hot-section">
			<div class="title">
				<span>热卖</span>
				<span class="line">|</span>
				<span>SALE</span>
			</div>
			<div class="list">
				<div class="item">
					<a href="">
						<img src="img/img-6.png">
						<div class="name">
							英式经典三防女
							式长风衣
						</div>
						<div class="price">
							￥599
						</div>
					</a>
				</div>
				<div class="item">
					<img src="img/img-2.png">
					<div class="name">
						超轻至暖铜氨丝
						白鹅绒被
					</div>
					<div class="price">
						￥999
					</div>
				</div>
				<div class="item">
					<img src="img/img-3.png">
					<div class="name">
						羊毛混纺经典长
						款大衣
					</div>
					<div class="price">
						￥1299
					</div>
				</div>
				<div class="item">
					<img src="img/img-1.png">
					<div class="name">
						创意懒人叠衣板
						+收纳箱
					</div>
					<div class="price">
						￥79
					</div>
				</div>
				<div class="item">
					<img src="img/img-4.png">
					<div class="name">
						GF合金包角拉链
						箱
					</div>
					<div class="price">
						￥259
					</div>
				</div>
				<div class="item">
					<img src="img/img-5.png">
					<div class="name">
						婴童纱布长斤三
						条装
					</div>
					<div class="price">
						￥59
					</div>
				</div>
			</div>
		</div>

		<!-- 热卖下面部分 -->
		<div class="section sale-section">
			<div class="left">
				<a href="#">
					<img src="img/pic-1.jpg">
				</a>
			</div>
			<div class="right">
				<a href="#">
					<img src="img/pic-2.jpg">
				</a>
				<a href="#">
					<img src="img/pic-3.jpg">
				</a>
			</div>
		</div>

		<!-- 精选 -->
		<div class="section selection-section">
			<div class="title">
				<span>精选</span>
				<span class="line">|</span>
				<span>SELECTION</span>
			</div>
			<div id="select-slider" class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="img/slider-1.jpg">
						<div class="info">
							<div class="name">本家HOME</div>
							<div class="price">29.9元起</div>
							<div class="discount">每满100立减20元</div>
						</div>
					</div>
					<div class="swiper-slide">
						<img src="img/slider-2.jpg">
						<div class="info">
							<div class="name">本家HOME</div>
							<div class="price">29.9元起</div>
							<div class="discount">每满100立减20元</div>
						</div>
					</div>
					<div class="swiper-slide">
						<img src="img/slider-1.jpg">
						<div class="info">
							<div class="name">本家HOME</div>
							<div class="price">29.9元起</div>
							<div class="discount">每满100立减20元</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- 底部菜单 -->
		<div class="tab-menu-bottom">
			<div class="item">
				<a href="#">
					<img src="img/icon-5.png">
					<div class="text">首页</div>
				</a>
			</div>
			<div class="item">
				<a href="#">
					<img src="img/icon-6.png">
					<div class="text">优选</div>
				</a>
			</div>
			<div class="item">
				<a href="#">
					<img src="img/icon-9.png">
					<div class="text">分类</div>
				</a>
			</div>
			<div class="item">
				<a href="#">
					<img src="img/icon-7.png">
					<div class="text">购物车</div>
				</a>
			</div>
			<div class="item">
				<a href="#">
					<img src="img/icon-8.png">
					<div class="text">我的</div>
				</a>
			</div>
		</div>

		<script src="lib/jQuery/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/swiper/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var mySwiper1 = new Swiper('#banner', {
				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
				},
			})
			var mySwiper2 = new Swiper('#select-slider', {
				slidesPerView: 'auto',
				spaceBetween: 30
			})
		</script>
	</body>
</html>
